import React, { Component, Fragment } from 'react';
import ReactDOM from 'react-dom';
import { connect } from 'dva';
import { Modal, Form, Button, Select, Input, Spin, Icon, Tooltip } from 'antd';
import prompt from '@/components/Prompt';
import StandardTable from '@/components/StandardTable';
import SearchSelect from '@/components/SearchSelect';
import AdModal from '@/components/AdModal';
import AntdForm from '@/components/AntdForm';
import AdSelect from '@/components/AdSelect';
import AdButton from '@/components/AdButton';
import AntdFormItem from '@/components/AntdFormItem';
import AntdInput from '@/components/AntdInput';
import EditPage from '@/components/EditPage';
import ExportAdrList from './ExportAddressList';
import { allDictList } from '@/utils/constans';
import SelectForm from '@/components/SelectForm';
import { formItemFragement } from '@/utils/common';
import { allDispatchType, allUrl } from '../utils';
import styles from '../exportOs.less';
import { transferLanguage } from '@/utils/utils';
import { languages } from 'monaco-editor';

const { Option } = Select;
const { TextArea } = Input;
const { confirm } = Modal;

@connect(({ exportOS, loading, i18n}) => ({
  addressList: exportOS.addressList,
  loading: loading.effects[allDispatchType.contactList],
  language: i18n.language,
}))
@Form.create()
export default class ExportAddressList extends Component {
  state = {
    formValues: {},
    selectedRows: [],
  };
  className = 'export-address-list';

  componentDidMount() {
    this.getAddressList();
  }

  componentWillMount() {}
  addressColumns = [
    {
      title: '姓名',
      dataIndex: 'name',
    },
    {
      title: '手机号',
      dataIndex: 'phone',
    },
    {
      title: '省市区',
      dataIndex: 'fullParentNames',
      render: (text, record) => <span title={text}>{text}</span>,
      render: (text, record) => <span title={text}>{text}</span>,
    },
    {
      title: '详细地址',
      dataIndex: 'address',
      render: (text, record) => <span title={text}>{text}</span>,
    },
  ];
  getAddressList = params => {
    const { dispatch, searchValue } = this.props;
    dispatch({
      type: allDispatchType.contactList,
      payload: params || {},
      callback: data => {
        if (!data) return;
        // queryPerson({ data, props, url: allUrl.userList });
      },
    });
  };
  // 分页操作
  handleStandardTableChange = param => {
    // const { formValues } = this.props;
    const { formValues } = this.state;
    this.getAddressList({ ...formValues, ...param });
  };
  handleSearch = formValues => {
    if (!formValues) return;
    // const { ...params } = formValues;
    // saveAllValues({ payload: { formValues: params }, props: this.props });
    this.getAddressList({ ...formValues });
  };

  handleStateChange = (options = []) => {
    options.map(item => {
      this.setState(item);
    });
  };
  //选择地址：
  chooseAddress = () => {
    const { getChoiceAddress } = this.props;
    const { selectedRows } = this.state;
    if (selectedRows.length == 0) {
      prompt({
        content: '请选择',
      });
      return;
    }
    if (selectedRows.length > 1) {
      prompt({
        content: '只能选择一条数据',
      });
      return;
    }
    getChoiceAddress(selectedRows[0]);
  };
  remove = () => {
    const { selectedRows } = this.state;
    const { dispatch } = this.props;
    confirm({
      title: '确定删除这条数据吗？',
      content: ' ',
      okText: '确定',
      okType: 'danger',
      cancelText: '取消',
      onOk: () => {
        dispatch({
          type: allDispatchType.delContact,
          payload: selectedRows.map(v => v.id),
          callback: () => {
            this.handleStateChange([{ selectedRows: [] }]);
            this.getAddressList();
          },
        });
      },
    });
  };

  /**
   * 双击选择
   */
  onDoubleClick = (record, e) => {
    e.stopPropagation();
    const { getChoiceAddress } = this.props;
    this.setState({ selectedRows: [record] });
    getChoiceAddress(record);
  };

  render() {
    const {
      disabled,
      userToken,
      addressType,
      visibleAdrList,
      form,
      setAdrListModal,
      addressList,
      loading,
      language
    } = this.props;
    const { selectedRows } = this.state;

    const commonParams = {
      getFieldDecorator: form.getFieldDecorator,
    };

    const firstFormItem = (
      <AntdFormItem label={transferLanguage('MyOrder.field.name', language)} code="name" {...commonParams}>
        <AntdInput placeholder="请输入姓名" />
      </AntdFormItem>
    );
    const secondFormItem = (
      <AntdFormItem label={transferLanguage('MyOrder.field.phone', language)} code="phone" {...commonParams}>
        <AntdInput placeholder="请输入手机号" />
      </AntdFormItem>
    );

    const selectFormParams = {
      firstFormItem,
      secondFormItem,
      form,
      className: this.className,
      handleFormReset: this.handleFormReset,
      handleSearch: this.handleSearch,
      // toggleForm: expandForm => {
      //     this.handleStateChange([{ expandForm }]);
      // },
      // code: codes.select,
    };

    return (
      <div className={styles.cusModal}>
        <AdModal
          visible={visibleAdrList}
          title={`选择地址`}
          onOk={() => this.chooseAddress()}
          onCancel={() => setAdrListModal()}
          footer={[
            <Button key="del" type="danger" onClick={this.remove}>
              {transferLanguage('MyOrder.field.delete', language)}
            </Button>,
            <Button key="submit" type="primary" loading={loading} onClick={this.chooseAddress}>
              {transferLanguage('MyOrder.field.identify', language)}
            </Button>,
          ]}
          width="70%"
          style={{
            maxWidth: 800,
          }}
        >
          {/* 地址库 */}
          <div className="modal-form-Info">
            <SelectForm {...selectFormParams} />
            <StandardTable
              loading={loading}
              data={addressList}
              selectedRows={selectedRows}
              onSelectRow={selectedRows => {
                // const newCheck = [selectedRows[selectedRows.length - 1]]
                // console.log(selectedRows, 'newCheck', newCheck)
                this.handleStateChange([{ selectedRows: selectedRows || [] }]);
              }}
              columns={this.addressColumns}
              onPaginationChange={this.handleStandardTableChange}
              // expandForm={expandForm}
              className={this.className}
              scrollY={300}
              code="address"
              // getCheckboxProps={record => {
              //   return record.status === 2; //已受理不可以操作
              // }}
              onRow={record => {
                return {
                  onDoubleClick: event => {
                    this.onDoubleClick(record, event);
                  },
                };
              }}
            />
          </div>
        </AdModal>
      </div>
    );
  }
}
